<style>
@import "../static/css/main.css";
@import "../static/css/color-dark.css";
*{
	margin: 0;
	padding: 0
}
html, body {
	font-family: 'Raleway', sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar{
	width: 12px;
}
/*滚动槽*/
::-webkit-scrollbar-track{
	border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255, 0, 0, 0.4);
}
#app {
	-font-family: 'Avenir', Helvetica, Arial, sans-serif;
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*text-align: center;*/
	color: #2c3e50;
	overflow: hidden;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: url('../static/img/all-bg.jpg') center center no-repeat; */
	background: url('../static/img2/bg.jpg') center center no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}

.wrap {
	width: 100%;
	height: 100%;
	/*background-color: #000;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
}

.fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
	opacity: 0;
}
.fl{
	float: left;
}
.fr{
	float: right
}
</style>
<style>
@import 'assets/font/font.css';
.no-people {
  color: #fff;
  height: 100%;
  display:flex;
  box-sizing: border-box;
  font-size: 25px;
  align-items:center;
  justify-content: center;
}
.el-message-box {
	border: none !important;
	/* background: url('../static/img/请选择奖项.png') !important; */
	background: url('../static/img2/img99.png');
	background-position:center center;
	background-repeat:no-repeat;
	background-size: contain;
	background-color:transparent!important;
	width: 645px !important;
	height: 255px !important;
	padding: 60px !important;
	box-sizing: border-box !important;
	position: relative !important;
	box-shadow:none!important
}
.el-message-box__content {
	color: #b64200 !important;
	font-size: 1.2em !important;
	font-weight:bold;
	letter-spacing:2px
}
.el-message-box__btns {
	position: absolute !important;
	left: 0 !important;
	bottom: 2.5em !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.el-message-box__btns .el-button {
	background: #f9e1b7 !important;
	background:url(../static/img2/img99_btn.png)!important;
	background-position:center!important;
	background-size:100% 100%!important;
	border: none !important;
	width: 6rem !important;
    height: 2.7rem !important;
    border-radius: 0.5rem !important;
    color: #ffdd93 !important;
	font-size: 1em !important;
	font-weight:bold!important;
	border-radius:20px!important
}
.el-message-box__btns .el-button--primary {

	color:#fff!important;
	background-size:100% 100%!important;
	border-radius:20px!important
}
.el-message-box__btns button:nth-child(2) {
    margin-left: 50px;
}
</style>

<template>
	<div id="app">
		<div class="bg"></div>
		<transition name="fade" mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>

<script>
import axios from 'axios';
import api from '@/api';
import * as api2 from "@/api/userApi.js";
import * as m_types from '@/store/mutation-types';

export default {
	name: 'App',
	data() {
		return {
			pingTimer:null
		};
	},
	created() {
		window.activity_id = this.$cookies.get('id')
		console.log('初始被创建',window.activity_id);
		if (window.activity_id) {
			api.setActivityId(window.activity_id);
			this.room = window.activity_id;
			this.initSocket();
			this.initLottory()
		}
		this.$root.$on('sendMsg', this.sendMsg);
	},
	// beforeDestroy(){
	// 	clearInterval(this.pingTimer)
	// },
	methods: {
		// 获取数据
		getUserList(cb) {
			api.getUserList({}).then((data) => {
				// console.log(JSON.stringify(data));
				this.$store.commit(m_types.SET_DATA, data);
				console.log(this.$store.state.app.data);
				if (cb) {
					cb();
				}
			}).catch((res) => {
				console.log(res);
				setTimeout(this.getUserList, 10000, cb);
			});
		},
		preload(url) {
			if (url) {
				let img = new Image();
				img.src = url;
			}
		},
		initLottory(){
			this.pingTimer = setInterval(() => {
				api2.pingLottory()
				.then((res)=>{
					if(res.code){
						return
					}
					console.log('ping....');
				})
				let id = window.activity_id
				this.$cookies.set('id',id,60*10)
			}, 1000*60*10);
			
		},
		// 初始化 socket
		initSocket() {
			this.login = false;
			let socket = this.socket = new WebSocket(window.socketURL);
			socket.addEventListener('open', this.socketHandler);
			socket.addEventListener('message', this.socketHandler);
			socket.addEventListener('close', this.socketHandler);
		},
		socketHandler(e) {
			switch (e.type) {
				case 'message':
					let d = JSON.parse(e.data);
					console.log('message: %s %O', d.type, d);
					switch (d.type) {
						case 'say':
							d = JSON.parse(d.content);
							switch (d.type) {
								case 'userJoin':
									// 接收用户进入
									api.formatUserList([d.data]);
									this.$root.$emit(d.type, d.data);
									break;
								case 'accept':
									// 接收用户是否中奖
									api.formatUserList([d.data]);
									this.$root.$emit(d.type, d.data);
									break;
								case 'syncLotteryResult':
									this.$root.$emit(d.type, d.data);
									break;
								case 'lottory':
									this.$root.$emit(d.type,d.data);
									break;
								case 'lottoryResult':
									this.$root.$emit(d.type,d.data)
									break;
								case 'deleteOne':
									this.$root.$emit(d.type,d.data)
									break;
								case 'setPrize':
									this.$root.$emit(d.type,d.data)
									break;
							}
							break;
						case 'ping':
							this.socket.send('{"type": "pong"}');
							break;
						case 'login':
							if (d.client_list) {
								console.log('login', Object.keys(d.client_list).length);
								this.login = true;
							}
							break;
					}
					break;
				case 'open':
					// 连接成功后进入指定小组
					this.socket.send(JSON.stringify({
						type: 'login',
						room_id: this.room,
						client_name: '',
					}));
					break;
				case 'close':
					this.initSocket();
					break;
			}
		},
		sendMsg(type, data) {
			if (!this.login || !this.socket || this.socket.readyState !== WebSocket.OPEN) {
				return;
			}
			this.socket.send(JSON.stringify({
				type: 'say',
				room_id: this.room,
				to_client_id: 'all',
				// client_name: '',
				content: JSON.stringify({
					type,
					data,
				})
			}));
		},
	},
};
</script>
